<template>
  <page-view class="main page-view">
    <router-view v-slot="{ Component }">
      <transition :name="animation">
        <keep-alive exclude="RecommendSongs">
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>

    <div class="footer">
      <router-link to="/main/found" class="nav-i">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-faxian"></use>
          </svg>
        </div>
        <p>发现</p>
      </router-link>
      <router-link to="/main/mine" class="nav-i">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wodeVIP"></use>
          </svg>
        <p>我的</p>
      </router-link>
      <router-link to="/main/attention" class="nav-i">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-guanzhu"></use>
          </svg>
        <p>关注</p>
      </router-link>
    </div>
  </page-view>
</template>

<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  name: "Main",
  setup(props, context) {
    const route = useRoute();
    const animation = ref("slide");
    let routeIndex = route.meta.index;
    watch(route, () => {
      animation.value =
        route.meta.index < routeIndex ? "slide-right" : "slide-left";
      routeIndex = route.meta.index;
    });

    return { animation };
  },
};
</script>

<style lang="less" scoped>
.page-view{
height: 607px;
}

.footer {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 7.5rem;
  height: 60px;
  font-size: 12px;
  background-color: rgb(255, 255, 255);
  border-top: 1px solid gainsboro;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .nav-i {
    // border: 1px solid black;
    flex: 1;
    height: 100%;
    text-align: center;
    .icon {
      width: 0.75rem;
      height: 0.75rem;
    }
    p{
      margin-top: -5px;
    }
  }
}
.router-link-active {
  color: rgb(250, 62, 100);
}
// 动画
// 向左
.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-enter-to,
.slide-left-leave-from,
.slide-left-leave-to,
.slide-right-enter-to,
.slide-right-leave-from,
.slide-right-leave-to {
  transform: translateX(0);
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 200ms linear;
  position: fixed;
}
// 向右
.slide-right-enter-from {
  transform: translateX(-100%);
}
</style>